<template >
  <!-- 页头 -->
  <div id="finish">
    <template>
      <!-- 表格 -->
      <el-table :data="tableData" stripe style="width: 100%">
        <el-table-column prop="id" label="订单编号"> </el-table-column>
        <el-table-column prop="orderTime" label="下单时间"> </el-table-column>
        <el-table-column prop="total" label="总价"></el-table-column>
        <el-table-column prop="status" label="状态"> </el-table-column>
        <el-table-column prop="customerId" label="顾客ID"> </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="oderDetail(scope.row)"
              >详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页按钮 -->
      <el-pagination
        @current-change="changePage"
        background
        layout="prev, pager, next"
        :total="total"
      >
      </el-pagination>
    </template>
  </div>
</template>
 
<script>
import qs from "querystring";
export default {
  created() {
    this.$axios.defaults.headers.post["Content-Type"] =
      "application/x-www-form-urlencoded";
  },
  data() {
    return {
      tableData: [],
      page: 0,
      pageSize: 6,
      realname: "",
      total: 1,
      telephone: "",
      name: "",
      formLabelWidth: "120px",
    };
  },
  mounted() {
    //页面载入时就发送axios请求
    var obj = {
      page: this.page,
      pageSize: this.pageSize,
      status: "已完成",
    };
    this.$axios.post("/order/queryPage", qs.stringify(obj)).then((res) => {
      console.log(res);
      //获取用户数量分页
      var total = res.data.data.total;
      this.total = Math.ceil(total / this.pageSize) * 10;
      this.tableData = res.data.data.list;
      console.log(this.tableData);
      this.orderTime();
      //   console.log(this.total);
    });
  },
  methods: {
    //页面改变时重新查询
    changePage(currentPage) {
      console.log(currentPage);
      this.page = currentPage - 1;
      this.getProduct();
    },
    //封装获取用户函数
    getProduct() {
      var obj = {
        page: this.page,
        pageSize: this.pageSize,
        status: "已完成",
      };
      console.log(obj);
      this.$axios.post("/order/queryPage", qs.stringify(obj)).then((res) => {
        console.log(res);
        //获取用户数量分页
        var total = res.data.data.total;
        this.total = Math.ceil(total / this.pageSize) * 10;
        this.tableData = res.data.data.list;
        console.log(this.tableData);
        this.orderTime();
        //   console.log(this.total);
      });
    },

    //跳转到查询订单页面
    oderDetail(data) {
      var id = data.id;
      this.$router.push({ path: "/orderDetail/index", query: { id } });
    },
    //转换时间函数
    orderTime() {
      for (var i = 0; i < this.tableData.length; i++) {
        var data = new Date(this.tableData[i].orderTime);
        this.tableData[i].orderTime = data.toLocaleString();
      }
    },
  },
};
</script>
